home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap12 / dun12_6.txt < prev    next >
Encoding:
Text File  |  1997-12-18  |  3.9 KB  |  188 lines
  1. <HTML>
  2. <HEAD>
  3. <TITLE>card file</TITLE>
  4. </HEAD>
  5.  
  6. <SCRIPT LANGUAGE="JavaScript">
  7.  
  8. var L=new layerTool();
  9. function layerTool()
  10.     {
  11.     if (navigator.appName=="Netscape")
  12.         this.layerProp=navProp;
  13.     else
  14.         this.layerProp=exProp;
  15.     }
  16. function exProp()
  17.     {
  18.     return document.all[arguments[arguments.length-1]].style;
  19.     }
  20. function navProp()
  21.     {
  22.     retVal="";
  23.     for (var x=0;x<arguments.length;x++)
  24.         {
  25.         retVal+="document.layers[\'"+arguments[x]+"\']";
  26.         if (x!=arguments.length-1)
  27.             retVal+=".";
  28.         }
  29.     return eval(retVal);
  30.     }
  31. function layerObject(layerID,z)
  32.     {
  33.     this.layerID=layerID;
  34.     this.depth=z;
  35.     this.oldDepth=z;
  36.     this.draw=drawLayer;
  37.     this.setZorder=setZorder;
  38.     }
  39. function setZorder(z)
  40.     {
  41.     this.depth=z;
  42.     }
  43. function drawLayer()
  44.     {
  45.     L.layerProp(this.layerID).zIndex=this.depth;
  46.     }
  47. function noteManager()
  48.     {
  49.     this.LayerList=new Array();
  50.     this.add=addLayer;
  51.     this.select=select;
  52.     }
  53. function addLayer(layerObject)
  54.     {
  55.     this.LayerList[this.LayerList.length]=layerObject;
  56.     }
  57. function select(LayerName)
  58.     {
  59.     for (x=0;x<this.LayerList.length;x++)
  60.         {
  61.         if (this.LayerList[x].layerID==LayerName)
  62.             {
  63.             if (this.LayerList[x].depth==100)
  64.                 {
  65.                 this.LayerList[x].setZorder(this.LayerList[x].oldDepth);
  66.                 }
  67.             else
  68.                 {
  69.                 this.LayerList[x].setZorder(100);
  70.                 }
  71.             }
  72.         else
  73.             {
  74.             this.LayerList[x].setZorder(this.LayerList[x].oldDepth);
  75.             }
  76.         this.LayerList[x].draw();
  77.         }
  78.     }
  79. function init()
  80.     {
  81.     tm=new noteManager();
  82.     for (x=1;x<=5;x++)
  83.         {
  84.         tm.add(new layerObject("note"+x,x));
  85.         }
  86.     }
  87. </SCRIPT>
  88. <STYLE TYPE="text/css">
  89. #note1{
  90.     TOP: 100px;
  91.     Z-ORDER: 1
  92.     }
  93. #note2{
  94.     TOP: 130px;
  95.     LEFT: 60px;
  96.     Z-ORDER: 2
  97.     }
  98. #note3{
  99.     TOP: 160px;
  100.     LEFT: 110px;
  101.     Z-ORDER: 3
  102.     }
  103. #note4{
  104.     TOP: 190px;
  105.     LEFT: 160px;
  106.     Z-ORDER: 4
  107.     }
  108. #note5{
  109.     TOP: 220px;
  110.     LEFT: 210px;
  111.     Z-ORDER: 5
  112.     }
  113.  
  114. .shuffleClass{
  115.     POSITION: absolute;
  116.     BACKGROUND: green;
  117.     VISIBILITY: visible;
  118.     LEFT: 10px;
  119.     WIDTH:150px
  120.     }
  121. ink, A:visited, A:active {
  122.     COLOR:blue;
  123.     FONT-WEIGHT:bold;
  124.     FONT-FAMILY: sans-serif;
  125.     TEXT-DECORATION: none
  126.     }
  127.  
  128. </STYLE>
  129. <BODY BGCOLOR="#000000" ONLOAD="init()">
  130.  
  131. <DIV ID="note1" CLASS="shuffleClass">
  132. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  133. <TR><TD VALIGN=TOP>
  134. <A HREF="JavaScript:tm.select('note1');">About Us</A>
  135. <P>
  136. links and information
  137. </P>
  138. </TD></TR>
  139. </TABLE>
  140. </DIV>
  141.  
  142. <DIV ID="note2" CLASS="shuffleClass">
  143. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  144. <TR><TD VALIGN=TOP>
  145. <A HREF="JavaScript:tm.select('note2');">Clients</A>
  146. <P>
  147. links and information
  148. </P>
  149. </TD></TR>
  150. </TABLE>
  151. </DIV>
  152.  
  153. <DIV ID="note3" CLASS="shuffleClass">
  154. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  155. <TR><TD VALIGN=TOP>
  156. <A HREF="JavaScript:tm.select('note3');">Freebies</A>
  157. <P>
  158. links and information
  159. </P>
  160. </TD></TR>
  161. </TABLE>
  162. </DIV>
  163.  
  164. <DIV ID="note4" CLASS="shuffleClass">
  165. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  166. <TR><TD VALIGN=TOP>
  167. <A HREF="JavaScript:tm.select('note4');">Links</A>
  168. <P>
  169. links and information
  170. </P>
  171. </TD></TR>
  172. </TABLE>
  173. </DIV>
  174.  
  175. <DIV ID="note5" CLASS="shuffleClass">
  176. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=GREEN CELLPADDING=10 BORDER=1>
  177. <TR><TD VALIGN=TOP>
  178. <A HREF="JavaScript:tm.select('note1');">Welcome</A>
  179. <P>
  180. links and information
  181. </P>
  182. </TD></TR>
  183. </TABLE>
  184. </DIV>
  185.  
  186. </BODY>
  187. </HTML>
  188.